import globalStyles from "@/common/styles/globalStyles";
import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import Toast from "react-native-toast-message";

export default function HeaderItem(props: {
	count: number;
	title: string;
	desc: string;
	isIcon?: boolean;
}) {
	const { count, title, desc, isIcon = false } = props;
    const onPress = (title:string) => {
        Toast.show({
            type: 'success',
            text1: "点击按钮 👋",
            text2: title,
        })
    }
	return (
		<TouchableOpacity onPress={() => onPress(title)}>
			<View style={globalStyles.aiCenter}>
				<View style={[globalStyles.rowLine, globalStyles.aiCenter]}>
					<Text style={styles.countText}>{count} </Text>
					{isIcon && (<Image style={{ width: 12, height: 12 }} source={require("@/assets/common/chevron-right.png")}/>)}
				</View>
				<View><Text style={styles.titleText}> {title} </Text></View>
				<View><Text style={styles.descText}>{desc}</Text></View>
			</View>
		</TouchableOpacity>
	);
}
const styles = StyleSheet.create({
	countText: {
		fontSize: 15,
		fontWeight: "600",
		color: "#000",
	},
	titleText: {
		fontSize: 12,
		color: "#000",
		marginTop: 6,
	},
	descText: {
		fontSize: 10,
		color: "#babdc4",
		marginTop: 4,
	},
});
